<template>
  <view class="warnings">
    <view class="section-title">
      <view class="title">
        <view>告警信息<text v-show="warningList.length">({{warningList.length}})</text></view>
      </view>
    </view>
    <view class="section-content">
      <view v-show="!warningList.length" class="no-content">
        暂无数据
      </view>
      <view class="warning-box">
        <view v-for="item in warningList" :key="item.key" class="warning-item" :class="item.style">
          <view class="icon-box">
            <view class="item-icon iconfont" :class="item.icon"></view>
          </view>
          <view class="warning-content">
            <view class="line">
              <view class="title">{{ item.title }}</view>
              <view class="time">{{ item.happenTime }}</view>
            </view>
            <view class="line">
              <view class="type">类型：{{ item.typeText }}</view>
              <view class="state">{{ item.stateText }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { formatDate } from '@/utils/index.js'
import { WARNING_TYPE, WARNING_TYPE_NAME, WARNING_STATE } from '@/constant';

export default {
  props: {
    projectInfo: {
      type: Object
    }
  },
  data() {
    return {
      warningList: [],
      warningType: '',
      fixedType: ''
    }
  },
  computed: {
    canEdit() {
      return this.projectInfo.canEdit
    }
  },
  watch: {
    projectInfo() {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      if (this.projectInfo?.id) {
        this.getWarningList()
      }
    },
    getWarningList() {
      const self = this
      uni.request({
        url: '/warnings/list',
        data: {
          xm_id: self.projectInfo.id
        },
        success(result) {
          if (result.data.success && Array.isArray(result.data.data)) {
            result.data.data.forEach((item) => {
              item.title = item.node_id
              item.key = item.id
              item.happenTime = formatDate(item.create_time, 'yyyy-MM-dd hh:mm')
              item.typeText = WARNING_TYPE_NAME[item.type] || ''
              item.style = ''
              switch (item.type) {
                case WARNING_TYPE.WARRING:
                  item.style = 'warning'
                  break
                case WARNING_TYPE.ERROR:
                  item.style = 'error'
                  break
              }
              item.icon = 'icon-warning-fill'
              item.stateText = ''
              switch (item.state) {
                case WARNING_STATE.HAPPEN:
                  item.stateText = '待修复'
                  break;
                case WARNING_STATE.REPAIRED:
                  item.stateText = formatDate(item.process_time, 'yyyy-MM-dd hh:mm') || '已修复'
                  item.style = 'ok'
                  item.icon = 'icon-success'
                  break;
                case WARNING_STATE.REPLACED:
                  item.stateText = formatDate(item.process_time, 'yyyy-MM-dd hh:mm') || '已更换'
                  item.style = 'ok'
                  item.icon = 'icon-success'
                  break;
              }
            })
            self.warningList = result.data.data
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.warnings {
  padding: 30rpx;
  border-radius: 10rpx;
  background-color: $white;
  min-height: 50vh;
}
.section-title {
  @include section-title;
}
.warning-item {
  border: 2rpx solid $border-base;
  border-radius: 10rpx;
  padding: 20rpx 20rpx 20rpx 100rpx;
  position: relative;
  margin-top: 20rpx;
  &.warning {
    .icon-box {
      background-color: $warning;
    }
  }
  &.error {
    .icon-box {
      background-color: $danger;
    }
  }
  &.ok {
    background-color: $background-light;
    .icon-box {
      background-color: $success;
    }
    .title {
      color: $text-secondary;
    }
    .type {
      color: $text-secondary;
    }
    .state {
      color: $success;
    }
  }
  .icon-box {
    position: absolute;
    left: 20rpx;
    top: 26rpx;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    color: $white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
  }
  .line {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
  }
  .title {
    font-size: 28rpx;
    color: $text-main;
    font-weight: bold;
  }
  .time {
    color: $text-secondary;
  }
  .type {
    color: $text-base;
  }
  .state {
    color: $danger;
  }
}

.no-content {
  margin-top: 20vh;
  text-align: center;
  color: $text-secondary;
}
</style>
